<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TP6-GII</title>


    <script crossorigin="anonymous"
        integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw=="
        src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
    <script src="//unpkg.com/view-design/dist/iview.min.js"></script>



    <!-- <script src="/static/gii/vue.min.js"></script> -->
    <!-- <link rel="stylesheet" href="/static/gii/iview.css"> -->
    <!-- <script src="/static/gii/iview.min.js"></script> -->
</head>

<body>
    <div id="app">

        <header>TP6-Gii</header>
        <section>
            <Card class="card">
                <p slot="title">
                    <Icon type="md-flag"></Icon>
                    模型
                </p>
                <a href="#" @click="submit" slot="extra">
                    生成
                </a>

                <Row gutter="15">
                    <i-Col span="8">
                        <Card>
                            <p slot="title">主表</p>
                            <i-button slot="extra" @click="addRelation">追加关联模型</i-button>
                            <i-Form :label-width="80">
                                <Form-Item label="表">
                                    <i-Select v-model="main.table" :filterable="true">
                                        <i-Option v-for="item in tables" :value="item.table_name"
                                            :key="item.table_name">{{item.table_name}} {{item.table_comment}}
                                        </i-Option>
                                    </i-Select>
                                </Form-Item>

                                <Form-Item label="模型名">
                                    <i-Input v-model="main.name" placeholder="默认表名驼峰"
                                        @click.native="stopPropagation(event)">
                                    </i-Input>
                                </Form-Item>

                                <Form-Item label="命名空间">
                                    <i-Input v-model="main.namespace" placeholder="app\admin\model"
                                        @click.native="stopPropagation(event)">
                                    </i-Input>
                                </Form-Item>

                                <Form-Item label="继承">
                                    <i-Input v-model="main.extend" placeholder="\think\model"
                                        @click.native="stopPropagation(event)">
                                    </i-Input>
                                </Form-Item>


                                <Form-Item label="软删除">
                                    <i-Switch v-model="main.soft" />
                                </Form-Item>
                            </i-Form>
                        </Card>
                    </i-Col>


                    <i-Col span="8" v-for="(item,key) in relations" :key="key">
                        <Card>
                            <p slot="title">关联表</p>

                            <i-Button type="error" size="small" @click="Remove(key)" slot="extra" shape="circle"
                                icon="md-close">
                            </i-Button>
                            <i-Form :label-width="80">
                                <Form-Item label="表">
                                    <i-Select v-model="item.table" @on-change="changeRelationTable(item)"
                                        :filterable="true">
                                        <i-Option v-for="t_item in tables" :value="t_item.table_name"
                                            :key="t_item.table_name">{{t_item.table_name}} {{t_item.table_comment}}
                                        </i-Option>
                                    </i-Select>
                                </Form-Item>

                                <Form-Item label="模型名">
                                    <i-Input v-model="item.name" placeholder="默认表名驼峰"
                                        @click.native="stopPropagation(event)">
                                    </i-Input>
                                </Form-Item>

                                <Form-Item label="关联名">
                                    <i-Input v-model="item.relation_name"></i-Input>
                                </Form-Item>

                                <Form-Item label="关系">
                                    <i-Select v-model="item.type">
                                        <i-Option v-for="t_item in relationType" :value="t_item"
                                            :key="t_item">{{t_item}}</i-Option>
                                    </i-Select>
                                </Form-Item>

                                <Form-Item label="外键">
                                    <i-Select v-model="item.foreign" :filterable="true">
                                        <i-Option v-for="fitem in foreignFields(item)" :value="fitem.name"
                                            :key="fitem.name">{{fitem.name}}</i-Option>
                                    </i-Select>
                                </Form-Item>

                                <Form-Item label="主键">
                                    <i-Select v-model="item.mainkey" :filterable="true">
                                        <i-Option v-for="m_item in mainFields(item)" :key="m_item.name"
                                            :value="m_item.name">{{m_item.name}}</i-Option>
                                    </i-Select>
                                </Form-Item>


                                <Form-Item label="软删除">
                                    <i-Switch v-model="item.soft" />
                                </Form-Item>
                            </i-Form>
                        </Card>
                    </i-Col>


                </Row>




            </Card>
        </section>

    </div>
</body>

</html>
<style>
    html,
    body,
    #app {
        height: 100%;
    }

    #app {
        background: #f1f4f6;
        display: flex;
        flex-direction: column;
    }

    #app header {
        text-align: center;
        font-size: 18px;
        background: #FFF;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        height: 50px;
        line-height: 50px;
    }

    #app>section {
        flex: auto;
    }

    #app>section .card {
        margin: 15px;
    }
</style>
<script>
    var tables = <?= $tables ?>;
    console.log(tables);

    new Vue({
        el: "#app",
        data() {
            return {
                main: {
                    table: "",
                    name: "",
                    soft: true,
                    namespace: "",
                    extend: ""
                },
                tables: tables,
                relationType: [
                    "hasOne",
                    "belongsTo",
                    "hasMany",
                    // "hasManyThrough",
                    // "hasOneThrough",
                    // 'belongsToMany'
                ],
                relations: []
            }
        },
        created: function () {
            this.main.namespace = localStorage.getItem("namespace");
            this.main.extend = localStorage.getItem("extend");
        },
        computed: {
            // 外键字段         
            foreignFields() {
                return function (relation) {
                    //如果关联关系不存在，那么返回[]
                    if (!relation.type) return [];
                    //如果是hasOne 那么外键是指关联表的字段
                    //如果是belongsTo 那么外键是指主表的字段
                    var name;
                    if (["hasOne", "hasMany"].indexOf(relation.type) > -1) {
                        name = relation.table
                    } else if (relation.type == "belongsTo") {
                        name = this.main.table
                    }
                    var table = this.tables.find(item => item.table_name == name);
                    if (!table) {
                        return []
                    }
                    return table.fields;
                }
            },
            //主键字段
            mainFields() {
                return function (relation) {
                    //主键字段 与外键判断刚好相反
                    if (!relation.type) return [];
                    var name;
                    if (["hasOne", "hasMany"].indexOf(relation.type) > -1) {
                        name = this.main.table
                    } else if (relation.type == "belongsTo") {
                        name = relation.table
                    }
                    var table = this.tables.find(item => item.table_name == name);
                    if (!table) {
                        return []
                    }
                    return table.fields;
                }
            }
        },
        methods: {
            submit: function () {
                var postData = {};
                postData = {
                    main: this.main,
                    relations: this.relations
                }

                localStorage.setItem("namespace", this.main.namespace);
                localStorage.setItem("extend", this.main.extend);
                //console.log(postData);
                this.post("/gii/model", postData);

            },
            stopPropagation: function (e) {
                e.stopPropagation();
            },
            //添加一个关联项
            addRelation: function (e) {
                this.stopPropagation(e);
                this.relations.push({})
            },
            Remove: function (index) {
                this.relations.splice(index, 1);
            },
            //关联项表名变更时
            changeRelationTable: function (relation) {
                relation.relation_name = relation.table.split("_").pop()
                table = this.tables.find(item => item.table_name == relation.table);
                relation.fields = table.fields;
            },
            post(url, data) {
                var ajax = new XMLHttpRequest();
                ajax.open("POST", url, true);
                ajax.setRequestHeader("Content-type", "application/json");
                ajax.onreadystatechange = () => {
                    if (ajax.readyState == 4) {
                        var data = JSON.parse(ajax.responseText);
                        if (data.code != 200) {
                            this.$Message.error(data.msg)
                        } else {
                            this.$Message.info(data.msg)
                        }
                    }
                }
                ajax.send(JSON.stringify(data));
            }
        }
    })
</script>;